<template>
  <div class="main-nav-item" :class="className">
    <ul>
      <li v-for="item in data" :key="item.code">
        <a
          href="javascript:void(0)"
          :class="item.subMenu.length > 0 ? 'extra-a' : ''"
          @click.stop="
            toPage(
              item.sysUrl + item.url,
              item.label,
              item.code,
              item.subMenu.length === 0
            )
          "
        >
          {{ item.label }}
          <main-nav-item
            v-if="item.subMenu.length > 0"
            :data="item.subMenu"
            :menus-data="menusData"
            :flat-menus="flatMenus"
            :right="right"
            :class-name="right ? 'right-menu' : 'left-menu'"
          />
        </a>
        <!-- {{item.subMenu.length !== 0 ? '有子节点':'无子节点' }} -->
        <span
          v-if="item.subMenu.length !== 0"
          class="caret-icon"
          :class="`${right ? 'el-icon-caret-left' : 'el-icon-caret-right'}`"
        />
      </li>
    </ul>
  </div>
</template>
<script>
// import { stringToHex } from 'src/utils/codeChange';
import toPage from 'src/mixins/toPage';
export default {
  name: 'MainNavItem',
  mixins: [toPage],
  props: {
    flatMenus: {
      type: Array,
      default: () => {
        return [];
      }
    },
    menusData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    },
    className: {
      type: String,
      default: ''
    },
    right: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    rightStyle(val) {
      // if (className) return {}
      return this.right ? { right: '100%' } : { left: 'calc(100% - 10px)' };
    }
  }
};
</script>
<style lang="scss" scoped>
.main-nav-item {
  display: none;
  position: absolute;
  top: 0;
  padding: 5px 0;
  min-width: 126px;
  background: #f5f5f5;
  box-shadow: 0 0 5px #ccc;
  min-height: 100%;
  li {
    position: relative;
    .caret-icon {
      cursor: pointer;
      position: absolute;
      top: 8px;
      &::before {
        top: 0;
        color: rgba(0, 0, 0, 0.5);
        line-height: 1;
        font-size: 12px;
        position: absolute;
        transform: scale(0.7);
        transform-origin: 50% 50%;
        transition: transform 0.3s;
      }
    }
    a {
      position: relative;
      display: block;
      padding: 6px 12px;
      min-width: 120px;
      text-decoration: none;
      color: #333;
      white-space: nowrap;
      /* &:hover {
                // background: #ccc;
                &>div {
                    display: block;
                }
            } */
    }
    &:hover {
      background: #ccc;
      & > .caret-icon {
        // display: none;
        &::before {
          background: transparent;
          transform: scale(0.7) rotate(180deg);
          // color: #5d9cec;
        }
      }
      & > a {
        & > div {
          display: block;
        }
      }
    }
  }
}
.left-menu {
  left: calc(100% - 5px);
  .caret-icon {
    top: 2px;
    right: 10px;
    &::before {
      right: 0px;
    }
  }
  /* &::after {
        content: '';
        position: absolute;
        top: 8px;
        left: -6px;
        border-top: 4px solid transparent;
        border-right: 6px solid #fff;
        border-bottom: 4px solid transparent;
    } */
  a.extra-a {
    padding-right: 20px;
  }
}

.right-menu {
  right: calc(100% - 5px);
  .caret-icon {
    left: 10px;
    /* &::before {
            transform: scale(0.4);
        } */
  }
  /* &::after {
        content: '';
        position: absolute;
        top: 8px;
        right: -6px;
        border-top: 4px solid transparent;
        border-left: 6px solid #fff;
        border-bottom: 4px solid transparent;
    } */
  a.extra-a {
    padding-left: 20px;
  }
}
.extra-menu {
  top: 100%;
  left: 0;
  height: auto;
  &::after {
    border: 0;
  }
}
</style>
